<template>
  <view class="container">
    <view class="title">找回密码</view>
    
    <view class="input-group">
      <view class="input-item">
        <text class="input-icon">📱</text>
        <input 
          v-model="phone" 
          type="number" 
          placeholder="请输入手机号"
          maxlength="11"
          @input="formatPhone"
        />
      </view>
      
      <view class="input-item">
        <text class="input-icon">❓</text>
        <input 
          v-model="favoriteThing" 
          type="text" 
          placeholder="请输入你最喜欢的东西"
          maxlength="50"
        />
      </view>
      
      <view class="input-item">
        <text class="input-icon">🔒</text>
        <input 
          v-model="newPassword" 
          type="password" 
          placeholder="请设置新密码（6-16位）"
          maxlength="16"
        />
      </view>
      
      <view class="input-item">
        <text class="input-icon">🔒</text>
        <input 
          v-model="confirmPassword" 
          type="password" 
          placeholder="请确认新密码"
          maxlength="16"
        />
      </view>
    </view>
    
    <button class="main-btn" @click="handleSubmit">重置密码</button>
    <view class="link-group">
      <text @click="goToLogin">返回登录</text>
    </view>               
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      favoriteThing: '',
      newPassword: '',
      confirmPassword: ''
    }
  },
  methods: {
    formatPhone(e) {
      this.phone = e.detail.value.replace(/\D/g, '')
    },
    async handleSubmit() {
      // 表单验证
      if (!this.phone) {
        return uni.showToast({ title: '请输入手机号', icon: 'none', duration: 1500 })
      }
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        return uni.showToast({ title: '手机号格式错误', icon: 'none', duration: 1500 })
      }
      if (!this.favoriteThing) {
        return uni.showToast({ title: '请输入你最喜欢的东西', icon: 'none', duration: 1500 })
      }
      if (!this.newPassword) {
        return uni.showToast({ title: '请设置新密码', icon: 'none', duration: 1500 })
      }
      if (this.newPassword.length < 6 || this.newPassword.length > 16) {
        return uni.showToast({ title: '密码长度需6-16位', icon: 'none', duration: 1500 })
      }
      if (this.newPassword !== this.confirmPassword) {
        return uni.showToast({ title: '两次密码不一致', icon: 'none', duration: 1500 })
      }

      try {
        uni.showLoading({ title: '重置中...' })
        
        const res = await uni.$http.post('/user/resetPassword', {
          phone: this.phone,
          favoriteThing: this.favoriteThing,
          password: this.newPassword
        })
        
        uni.hideLoading()
        
        if (res.statusCode !== 200) {
          throw new Error(`HTTP错误：${res.statusCode}`)
        }
        
        if (res.data.code === 200) {
          uni.showToast({ title: '密码重置成功', duration: 1500 })
          setTimeout(() => {
            this.goToLogin()
          }, 1000)
        } else {
          uni.showToast({ 
            title: res.data.msg || '重置失败', 
            icon: 'none',
            duration: 1500
          })
        }
      } catch (err) {
        uni.hideLoading()
        console.error('重置密码失败：', err)
        uni.showToast({ 
          title: '网络连接失败，请稍后重试', 
          icon: 'none',
          duration: 1500
        })
      }
    },
    goToLogin() {
      uni.navigateTo({ url: '/my_pages/login' })
    }
  }
}
</script>

<style scoped>
/* 与注册页面样式完全一致 */
.container {
  padding: 50rpx 30rpx;
  min-height: 100vh;
  background-color: #F8F8F8;
}
.title {
  font-size: 40rpx;
  text-align: center;
  margin: 60rpx 0 80rpx;
  color: #333;
}
.input-group {
  margin-bottom: 60rpx;
}
.input-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 0 20rpx;
  height: 90rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}
.input-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}
.input-item input {
  flex: 1;
  height: 100%;
  font-size: 32rpx;
}
.main-btn {
  width: 100%;
  height: 96rpx;
  line-height: 96rpx;
  background-color: #C00000;
  color: #fff;
  font-size: 34rpx;
  border-radius: 48rpx;
  margin-bottom: 30rpx;
}
.link-group {
  text-align: center;
  padding: 0 20rpx;
}
.link-group text {
  font-size: 28rpx;
  color: #666;
}
.link-group text:active {
  color: #999;
}
</style>
